import DoctorBrief from './components/DoctorBrief'
import { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import styles from './index.module.scss'

import iconTime from '@/static/icons/time.svg'
import iconRun from '@/static/icons/run.svg'
import iconWrench from '@/static/icons/wrench.svg'
import iconAccessibility from '@/static/icons/accessibility.svg'
import imgDoctorAvatar from '@/static/fake/doctor-avatar.png'
import imgBanner from '@/static/fake/train1.png'

export default function Index() {
    const [data, setData] = useState<any>()

    useEffect(() => {
        const preload = Taro.getCurrentInstance().preloadData
        setData(preload)
        Taro.setNavigationBarTitle({
            title: preload?.planname,
        })
        Taro.preload({})
    }, [])

    const handleClick = () => {
        Taro.navigateTo({ url: '/subPages/rehabTraining/index' })
    }

    return (
        <View className={styles.container}>
            {/* banner */}
            <View className={styles.banner}>
                <Image src={imgBanner} mode='widthFix' />
            </View>
            {/* 内容 */}
            {data && (
                <View className={styles.content}>
                    {/* 一些信息 */}
                    <View className={styles.info}>
                        <Text className={styles.projectName}>
                            中期康复训练计划
                        </Text>
                        <Text className={styles.trainType}>被动训练</Text>
                    </View>
                    {/* 名称 */}
                    <View className={styles.title}>
                        <Text className={styles.titleName}>
                            {data.planname}
                        </Text>
                        <View className={styles.flexibility}>
                            0°-{data.flexibility}°
                        </View>
                    </View>
                    {/* 摘要 */}
                    <View className={styles.text}>
                        <Text>
                            通过肢体的康复训练完成因为神经受损而丧失的肢体功能，使患者重新获得失去的功能。要想得到真正的神经康复，必须反复通过学习→获得→强化这三个步骤才能终身固定。
                        </Text>
                    </View>
                    {/* 其他信息 */}
                    <View className={styles.other}>
                        <View className={styles.otherItem}>
                            <View className={styles.otherItemIcon}>
                                <Image className='icon' src={iconTime} />
                            </View>
                            <View className={styles.otherItemLabel}>时长</View>
                            <View className={styles.otherItemValue}>
                                {data.duration}Min
                            </View>
                        </View>
                        <View className={styles.otherItem}>
                            <View className={styles.otherItemIcon}>
                                <Image className='icon' src={iconRun} />
                            </View>
                            <View className={styles.otherItemLabel}>消耗</View>
                            <View className={styles.otherItemValue}>
                                {data.calorie}Kcal
                            </View>
                        </View>
                        <View className={styles.otherItem}>
                            <View className={styles.otherItemIcon}>
                                <Image className='icon' src={iconWrench} />
                            </View>
                            <View className={styles.otherItemLabel}>辅助</View>
                            <View className={styles.otherItemValue}>
                                {data.device}
                            </View>
                        </View>
                        <View className={styles.otherItem}>
                            <View className={styles.otherItemIcon}>
                                <Image
                                    className='icon'
                                    src={iconAccessibility}
                                />
                            </View>
                            <View className={styles.otherItemLabel}>部位</View>
                            <View className={styles.otherItemValue}>
                                {data.part}
                            </View>
                        </View>
                    </View>
                    {/* 医生 */}
                    <View className={styles.doctor}>
                        <DoctorBrief
                            name='敖医师'
                            projectName='中期康复训练计划'
                            trainType='被动训练'
                            avatarUrl={imgDoctorAvatar}
                        />
                    </View>
                    {/* 按钮 */}
                    <View
                        className={styles.button}
                        onClick={() => handleClick()}
                    >
                        <Text>现在开始</Text>
                    </View>
                </View>
            )}
        </View>
    )
}
